<script setup lang="ts">
import type { Key, TreeOption } from '@ele-similar-ui/components/tree'
import { ref } from 'vue'

function createData(level = 4, parentKey = '', total = 6): any {
  if (!level) return []
  const arr = new Array(total - level).fill(0)
  return arr.map((_, idx: number) => {
    const key = parentKey + level + idx
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key)
    }
  })
}
function createLabel(level: number) {
  if (level === 4) return '道生一'
  if (level === 3) return '一生二'
  if (level === 2) return '二生三'
  if (level === 1) return '三生万物'
  return ''
}
const data = ref(createData())

function createData1() {
  return [
    {
      label: nextLabel(),
      key: 1,
      isLeaf: false
    },
    {
      label: nextLabel(),
      key: 2,
      isLeaf: false
    }
  ]
}
function nextLabel(currentLabel?: string | number): string {
  if (!currentLabel) return 'Out of Tao, One is born'
  if (currentLabel === 'Out of Tao, One is born') return 'Out of One, Two'
  if (currentLabel === 'Out of One, Two') return 'Out of Two, Three'
  if (currentLabel === 'Out of Two, Three')
    return 'Out of Three, the created universe'
  if (currentLabel === 'Out of Three, the created universe')
    return 'Out of Tao, One is born'
  return ''
}
const data1 = ref(createData1())

const handleLoad = (node: TreeOption) => {
  // 内部肯定需要将展开的节点传递过来
  return new Promise<TreeOption[]>(resolve => {
    setTimeout(() => {
      resolve([
        {
          label: nextLabel(node.label),
          key: node.key + nextLabel(node.label),
          isLeaf: false
        }
      ])
    }, 1000)
  })
}
const value = ref<Key[]>(['41'])

const disableData = ref<TreeOption[]>([
  {
    key: '0',
    label: '0',
    children: [
      {
        key: '0-0',
        label: '0-0'
      },
      {
        disabled: true,
        key: '0-1',
        label: '0-1',
        children: [
          {
            label: '0-1-0',
            value: '0-1-0'
          },
          {
            label: '0-1-1',
            value: '0-1-1'
          }
        ]
      }
    ]
  }
])

const virtualData = ref(createData(4, '', 20))
</script>

<template>
  <p>基础树</p>
  <EsTree
    :data="data"
    label-field="label"
    key-field="key"
    children-field="children"
  ></EsTree>
  <p>异步加载树</p>
  <EsTree
    :data="data1"
    label-field="label"
    key-field="key"
    children-field="children"
    :on-load="handleLoad"
  ></EsTree>
  <p>可选择</p>
  <EsTree
    v-model:selected-keys="value"
    :data="data"
    selectable
    show-checkbox
    :default-checked-keys="['41']"
  ></EsTree>
  <p>树节点的选择</p>
  <EsTree
    v-model:selected-keys="value"
    :data="data"
    selectable
    multiple
  ></EsTree>
  <p>禁用节点</p>
  <EsTree :data="disableData"></EsTree>
  <p>自定义节点</p>
  <EsTree
    :data="data"
    label-field="label"
    key-field="key"
    children-field="children"
  >
    <template #default="{ node }">{{ node.key }} - {{ node.label }}</template>
  </EsTree>
  <p>虚拟滚动</p>
  <EsTree
    :data="virtualData"
    label-field="label"
    key-field="key"
    children-field="children"
  ></EsTree>
</template>

<style scoped lang="scss"></style>
